class PhotoSlideshow {
    constructor() {
        this.currentIndex = 0;
        this.isPlaying = false;
        this.isFullscreen = false;
        this.autoPlayInterval = null;
        this.autoPlayDelay = 3000; // 3秒自动切换
        
        // 示例图片数据
        this.images = [
            {
                src: 'https://picsum.photos/1200/800?random=1',
                title: '美丽风景 1'
            },
            {
                src: 'https://picsum.photos/1200/800?random=2',
                title: '城市夜景 2'
            },
            {
                src: 'https://picsum.photos/1200/800?random=3',
                title: '自然风光 3'
            },
            {
                src: 'https://picsum.photos/1200/800?random=4',
                title: '建筑艺术 4'
            },
            {
                src: 'https://picsum.photos/1200/800?random=5',
                title: '人文摄影 5'
            },
            {
                src: 'https://picsum.photos/1200/800?random=6',
                title: '动物世界 6'
            },
            {
                src: 'https://picsum.photos/1200/800?random=7',
                title: '花卉特写 7'
            },
            {
                src: 'https://picsum.photos/1200/800?random=8',
                title: '海洋风光 8'
            },
            {
                src: 'https://picsum.photos/1200/800?random=9',
                title: '山岳景观 9'
            },
            {
                src: 'https://picsum.photos/1200/800?random=10',
                title: '田园风光 10'
            }
        ];

        this.init();
    }

    init() {
        this.bindElements();
        this.bindEvents();
        this.generateThumbnails();
        this.loadImage(0);
        this.updateProgress();
    }

    bindElements() {
        this.currentImage = document.getElementById('currentImage');
        this.imageCounter = document.getElementById('imageCounter');
        this.imageTitle = document.getElementById('imageTitle');
        this.thumbnailWrapper = document.getElementById('thumbnailWrapper');
        this.prevBtn = document.getElementById('prevBtn');
        this.nextBtn = document.getElementById('nextBtn');
        this.playBtn = document.getElementById('playBtn');
        this.fullscreenBtn = document.getElementById('fullscreenBtn');
        this.progressFill = document.getElementById('progressFill');
        this.container = document.querySelector('.container');
    }

    bindEvents() {
        this.prevBtn.addEventListener('click', () => this.previous());
        this.nextBtn.addEventListener('click', () => this.next());
        this.playBtn.addEventListener('click', () => this.togglePlay());
        this.fullscreenBtn.addEventListener('click', () => this.toggleFullscreen());

        // 键盘导航
        document.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowLeft':
                    e.preventDefault();
                    this.previous();
                    break;
                case 'ArrowRight':
                    e.preventDefault();
                    this.next();
                    break;
                case ' ':
                    e.preventDefault();
                    this.togglePlay();
                    break;
                case 'f':
                case 'F':
                    e.preventDefault();
                    this.toggleFullscreen();
                    break;
                case 'Escape':
                    if (this.isFullscreen) {
                        this.toggleFullscreen();
                    }
                    break;
            }
        });

        // 触摸滑动支持
        let startX = 0;
        let startY = 0;
        let endX = 0;
        let endY = 0;

        this.currentImage.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
        });

        this.currentImage.addEventListener('touchend', (e) => {
            endX = e.changedTouches[0].clientX;
            endY = e.changedTouches[0].clientY;
            
            const diffX = startX - endX;
            const diffY = startY - endY;
            
            // 确保是水平滑动而不是垂直滑动
            if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
                if (diffX > 0) {
                    this.next();
                } else {
                    this.previous();
                }
            }
        });

        // 鼠标滚轮支持
        this.currentImage.addEventListener('wheel', (e) => {
            e.preventDefault();
            if (e.deltaY > 0) {
                this.next();
            } else {
                this.previous();
            }
        });
    }

    generateThumbnails() {
        this.thumbnailWrapper.innerHTML = '';
        
        this.images.forEach((image, index) => {
            const thumbnail = document.createElement('img');
            thumbnail.src = image.src;
            thumbnail.alt = image.title;
            thumbnail.className = 'thumbnail';
            thumbnail.dataset.index = index;
            
            thumbnail.addEventListener('click', () => {
                this.loadImage(index);
            });
            
            this.thumbnailWrapper.appendChild(thumbnail);
        });
    }

    loadImage(index) {
        if (index < 0) index = this.images.length - 1;
        if (index >= this.images.length) index = 0;
        
        this.currentIndex = index;
        const image = this.images[index];
        
        // 显示加载动画
        this.currentImage.style.opacity = '0';
        
        // 预加载图片
        const img = new Image();
        img.onload = () => {
            this.currentImage.src = image.src;
            this.currentImage.style.opacity = '1';
            this.updateInfo();
            this.updateThumbnails();
            this.updateProgress();
        };
        img.src = image.src;
    }

    updateInfo() {
        const image = this.images[this.currentIndex];
        this.imageCounter.textContent = `${this.currentIndex + 1} / ${this.images.length}`;
        this.imageTitle.textContent = image.title;
    }

    updateThumbnails() {
        const thumbnails = this.thumbnailWrapper.querySelectorAll('.thumbnail');
        thumbnails.forEach((thumb, index) => {
            thumb.classList.toggle('active', index === this.currentIndex);
        });
        
        // 滚动到当前缩略图
        const activeThumb = thumbnails[this.currentIndex];
        if (activeThumb) {
            activeThumb.scrollIntoView({
                behavior: 'smooth',
                block: 'nearest',
                inline: 'center'
            });
        }
    }

    updateProgress() {
        const progress = ((this.currentIndex + 1) / this.images.length) * 100;
        this.progressFill.style.width = `${progress}%`;
    }

    previous() {
        this.loadImage(this.currentIndex - 1);
        this.resetAutoPlay();
    }

    next() {
        this.loadImage(this.currentIndex + 1);
        this.resetAutoPlay();
    }

    togglePlay() {
        if (this.isPlaying) {
            this.stopAutoPlay();
        } else {
            this.startAutoPlay();
        }
    }

    startAutoPlay() {
        this.isPlaying = true;
        this.playBtn.innerHTML = '<i class="fas fa-pause"></i>';
        
        this.autoPlayInterval = setInterval(() => {
            this.next();
        }, this.autoPlayDelay);
    }

    stopAutoPlay() {
        this.isPlaying = false;
        this.playBtn.innerHTML = '<i class="fas fa-play"></i>';
        
        if (this.autoPlayInterval) {
            clearInterval(this.autoPlayInterval);
            this.autoPlayInterval = null;
        }
    }

    resetAutoPlay() {
        if (this.isPlaying) {
            this.stopAutoPlay();
            this.startAutoPlay();
        }
    }

    toggleFullscreen() {
        if (!this.isFullscreen) {
            this.enterFullscreen();
        } else {
            this.exitFullscreen();
        }
    }

    enterFullscreen() {
        this.isFullscreen = true;
        this.container.classList.add('fullscreen');
        this.fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
        
        // 隐藏缩略图容器在全屏模式下
        const thumbnailContainer = document.querySelector('.thumbnail-container');
        if (thumbnailContainer) {
            thumbnailContainer.style.display = 'none';
        }
    }

    exitFullscreen() {
        this.isFullscreen = false;
        this.container.classList.remove('fullscreen');
        this.fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
        
        // 显示缩略图容器
        const thumbnailContainer = document.querySelector('.thumbnail-container');
        if (thumbnailContainer) {
            thumbnailContainer.style.display = 'block';
        }
    }

    // 添加自定义图片
    addImage(src, title) {
        this.images.push({ src, title });
        this.generateThumbnails();
        this.updateInfo();
    }

    // 移除图片
    removeImage(index) {
        if (index >= 0 && index < this.images.length) {
            this.images.splice(index, 1);
            this.generateThumbnails();
            
            if (this.currentIndex >= this.images.length) {
                this.currentIndex = this.images.length - 1;
            }
            
            this.loadImage(this.currentIndex);
        }
    }

    // 设置自动播放延迟
    setAutoPlayDelay(delay) {
        this.autoPlayDelay = delay;
        if (this.isPlaying) {
            this.resetAutoPlay();
        }
    }
}

// 初始化应用
document.addEventListener('DOMContentLoaded', () => {
    const slideshow = new PhotoSlideshow();
    
    // 将实例暴露到全局，方便调试
    window.slideshow = slideshow;
    
    // 添加一些示例功能
    console.log('相册幻灯片已初始化！');
    console.log('快捷键说明：');
    console.log('- 左右箭头键：切换图片');
    console.log('- 空格键：播放/暂停');
    console.log('- F键：全屏切换');
    console.log('- ESC键：退出全屏');
});
